<template>
    <div class="tab-container">
        <div class="leftt-container">
            <div class="top-container">
                <div class="header">
                    填写您想使用的交易模型
                </div>
                <div class="header">
                <el-radio v-model="radio" label="1">普通交易规则</el-radio>
                <el-radio v-model="radio" label="2">市场择时交易</el-radio>
                </div>
            </div>
            <div class="bottom-container">
                <div v-if="radio == '1'" class="ptjy">
                    <div class="oneRow BM10">
                        <div class="oneRow" ><span><b>时机:</b></span><span class="LM10">开盘买入</span></div>
                        <div class="oneRow" ><span>持股周期</span><span><el-input class="LM10" v-model="stockDuration" placeholder="请输入内容" ></el-input></span><span class="LM10">天</span></div>
                    </div>
                    <div class="oneRow BM10">
                        <div class="oneRow" ><span><b>止盈:</b></span><span class="LM10">收益率≥</span><span><el-input class="LM10" v-model="input" placeholder="请输入内容" ></el-input></span><span class="LM10">%时坚定持有，直到最高收益回落</span><span><el-input class="LM10" v-model="input" placeholder="请输入内容" ></el-input></span><span class="LM10">%</span></div>
                    </div>
                    <div class="oneRow BM10">
                        <div class="oneRow" >
                            <div>
                                <span><b>持股上限</b></span>
                                <span class="LM10">
                                    <el-select v-model="cgsx_value" placeholder="请选择" style="width: 100px;">
                                        <el-option
                                            v-for="item in cgsx_options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </span>
                            </div>

                            <div class="LM10">
                                <span><b>单日买入数</b></span>
                                <span class="LM10">
                                    <el-select v-model="drmr_value" placeholder="请选择" style="width: 100px;"> 
                                        <el-option
                                            v-for="item in drmr_options"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </span>
                            </div> 
                            
                            <div class="oneRow LM10">
                                <span class="LM10">资金量: </span><span><el-input class="LM10" v-model="cashAmount" placeholder="请输入内容" ></el-input></span><span class="LM10">元</span>
                            </div>
                        </div>
                    </div>

                    <div class="oneRow BM10">
                        <div class="oneRow" ><span><b>止损:</b></span><span class="LM10">收益≤</span><span><el-input class="LM10" v-model="input" placeholder="请输入内容" ></el-input></span><span class="LM10">%</span></div>
                        <div class="oneRow" ><span><b>仓位控制:</b></span><span class="LM10">满仓</span></div>
                    </div>
                </div>
                <div v-else >456</div>
            </div>

        </div>
        <!-- <div class="right-container">
            <div class="header">
                {{ `${tabName}详情` }}
            </div>
            <div class="content">
                content
            </div>
        </div> -->

    </div>
</template>
  
<script>
import { string } from 'clipboard';

import { mapGetters } from 'vuex'
import DataCard from './dataCard'


export default {
    name: 'ConditionContent',
    props: {
        "tabName": {
            type: string,
            default: 'test'
        },
        "dataList": {
            type: Array,
            default: []
        }
    },
    components: { DataCard },
    data() {
        return {
            radio: '1',
            cgsx_options: [{
                value: '1',
                label: '1只'
            },{
                value: '2',
                label: '2只'
            }],
            cgsx_value:'2',
            drmr_options: [{
                value: '1',
                label: '1只'
            },{
                value: '2',
                label: '2只'
            }],
            drmr_value:'1',

            stockDuration: '',
            cashAmount: ''
        }
    },
    computed: {

    },
    created() {

    }
}
</script>
  
<style lang="scss" scoped>
.tab-container {
    display: flex;
    justify-content: space-between;
    height: 100%;

        
    .oneRow{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .LM10{
        margin-left: 10px;
    }
    .BM10{
        margin-bottom: 15px;
    }

    .leftt-container {
        width: 70%;
        background: white;
        height: 100%;
        padding: 30px 20px;



        .top-container {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            padding-bottom: 15px;
            border-bottom: 1px solid #cdcdcd;
        }

        .bottom-container {
            .ptjy{
                padding: 20px;
            }
        }
        .header {
            font-size: 24px;
            font-weight: 700;
        }

        .content {
            padding: 30px 10px 10px 10px;
            .el-col {
                margin-bottom: 30px;
                &:last-child {
                  margin-bottom: 0;
                }
              }
        }
    }

    .right-container {
        width: 29%;
        background: white;
        height: 100%;
        padding: 30px 20px;

        .header {
            font-size: 32px;
            font-weight: 700;
        }

        .content {
            padding: 30px 10px 10px 10px;
        }
    }


}</style>
  
  